<!--用户账号管理-->
<template >
  <div class="tool-wrap">
    <h4 class="sm-title">我的工具</h4>

    <el-tabs class="tabs-box"  v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="大数据开发套件A" name="one">
        <ul class="sm-tabs">
          <li v-for="(item,index) in smTabs" :class="{'active' : smTabsActive == index}" @click="smTabsActiveHandle(index)">
            {{item.name}}
          </li>
        </ul>
        <div class="sm-banner">
          <h1>{{smTabs[smTabsActive].toolName}}</h1>
          <a @click="navigator">进入工具</a>
        </div>

        <div class="info-box">
          <h3>基础信息</h3>
          <dl>
            <dd>
              <span>访问次数</span>
              <strong>7天内35次，总计287次</strong>
            </dd>
            <dd>
              <span>授权项目</span>
              <strong>4个项目</strong>
            </dd>
            <dd>
              <span>最后运行时间</span>
              <strong>2021-05-18 09:00:00</strong>
            </dd>

            <dd>
              <span>运行次数</span>
              <strong>7天内135次，总计1289次</strong>
            </dd>
            <dd>
              <span>授权开发人员</span>
              <strong>5名</strong>
            </dd>
            <dd>
              <span>工具获得时间</span>
              <strong>2021-07-20 16:20:18</strong>
            </dd>
          </dl>
        </div>

        <div class="column-box column-box-3">
          <div class="view-box">
            <div class="title">
              <h2>资源占用统计</h2>
              <div class="select-nav">
                <span class="active">全部</span>
                <span>最近7天</span>
              </div>
            </div>
            <echarts-view class="echart-view" ref="resource"></echarts-view>
          </div>

          <div class="view-box">
            <div class="title">
              <h2>资源占用统计</h2>
              <div class="select-nav">
                <span class="active">全部</span>
                <span>最近7天</span>
              </div>

            </div>
            <echarts-view class="echart-view" ref="project"></echarts-view>
          </div>

          <div class="view-box">
            <div class="title">
              <h2>资源占用统计</h2>
              <div class="select-nav">
                <span class="active">全部</span>
                <span>最近7天</span>
              </div>

            </div>
            <echarts-view class="echart-view" ref="behavior"></echarts-view>
          </div>
        </div>

        <div class="row-box">
          <div class="info-box column-2">
            <h3>数据源与归集库</h3>
            <dl>
              <dd>
                <span>归集库数量</span>
                <strong>4个</strong>
              </dd>
              <dd>
                <span>数据源数量</span>
                <strong>35个</strong>
              </dd>
              <dd>
                <span>归集库元数据数量</span>
                <strong>765名</strong>
              </dd>

              <dd>
                <span>对接元数据数量</span>
                <strong>2786个</strong>
              </dd>
              <dd>
                <span>归集库数据条目数量</span>
                <strong>765名</strong>
              </dd>
            </dl>
          </div>

          <div class="info-box column-1">
            <h3>定时作业</h3>
            <dl>
              <dd>
                <span>作业计划数量</span>
                <strong>18个</strong>
              </dd>
              <dd>
                <span>作业运作次数</span>
                <strong>7天内38次，共354次</strong>
              </dd>
              <dd>
                <span>作业处理数据条数</span>
                <strong>7天内380次，共6874次</strong>
              </dd>
            </dl>
          </div>
        </div>

        <div class="column-box column-box-3">
          <div class="view-box">
            <div class="title">
              <h2>近期定时作业排名</h2>
            </div>
            <echarts-view class="echart-view" ref="ranking"></echarts-view>
          </div>

          <div class="view-box">
            <div class="title">
              <h2>归集库增量近况</h2>
            </div>
            <echarts-view class="echart-view" ref="increment"></echarts-view>
          </div>

        </div>

        <div class="evaluate">
          <h3>我的评价</h3>
          <p>MySQL 是全球最受欢迎的开源数据库之一，性能卓越，搭配 LAMP，成为 WEB 开发的高效解决方案。 云数据库 MySQL 拥有即开即用、稳定可靠、安全运行、弹性伸缩、轻松管理、经济实用等特点，让您更加专注业务发展。相比自建数据库，华为云数据库具有高性能、高扩展、一致性、易操作等特性，为企业海量数据处理、智能存储、业务应用提供强有力的平台支撑。</p>

          <el-rate
            v-model="rateVal"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}星">
          </el-rate>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'tool',
  data(){
    return {
      activeName : 'one',
      rateVal : 5,
      smTabs: [
        {
          name : '归集工具',
          href : 'https://81.71.100.26/index.html#/',
          toolName : '数据归集工具',
        },
        {
          name : '质量工具',
          href : 'http://www.connect-sx.com:58268',
          toolName : '数据质量工具',
        },
        {
          name : '治理工具',
          href : '',
          toolName : '数据治理工具',
        },
        {
          name : '开发工具',
          href : '',
          toolName : '数据开发工具',
        },
        {
          name : '开放工具',
          href : 'http://www.connect-sx.com:19745',
          toolName : '数据开放工具',
        },
        {
          name : '可视化工具',
          href : 'http://134.175.222.138:8080/bi/viewer?au_act=login&adminv=admin&passv=Yh123456',
          toolName : '数据可视化工具',
        },
      ],
      smTabsActive : 0
    }
  },
  mounted () {
    setTimeout(()=>{
      this.resourceEchart()
      this.projectEchart()
      this.behaviorEchart()
      this.rankingEchart()
      this.incrementEchart()
    },300)
  },
  methods:{
    smTabsActiveHandle(index){
      this.smTabsActive = index
    },
    navigator(){
     let index = this.smTabsActive
     let href =  this.smTabs[index].href

     if(!href){
       return  this.$message('正在开发中');
     }
     window.open(href)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    resourceEchart(){
      let color = [
        '#63DAAB','#5B8FF9','#EFBA1C'
      ];

      let xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8"];
      let yAxisData1 = [100, 138, 350, 173, 180, 150, 180, 230];
      let yAxisData2 = [233, 233, 200, 180, 199, 233, 210, 180];
      let yAxisData3 = [323, 234, 140, 150, 299, 133, 240, 150];


      let option = {
        backgroundColor: '#fff',
        color: color,
        legend: {
          top:5,
          left:10
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}2020.${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                万元`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        },
        grid: {
          top: 65,
          left: 5,
          bottom: 10,
          right: 20,
          containLabel: true
        },
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: '2021-{value}',
            textStyle: {
              color: "#333"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          data: xAxisData,
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#666"
            }
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9"
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: "计算引擎",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          symbol: 'circle',//数据交叉点样式

          data: yAxisData1
        }, {
          name: "数据湖储存",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          symbol: 'circle',//数据交叉点样式 (实心点)
          data: yAxisData2
        }, {
          name: "网络",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          symbol: 'circle',//数据交叉点样式 (实心点)
          data: yAxisData3
        }]
      };
      this.$refs.resource.updataEchart(option)
    },

    projectEchart(){
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
               ${v.name}<span >${v.value}</span> 个`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        },
        legend: {
          selectedMode: false,
        },

        grid: {
          top: 25,
          left: 15,
          right: 15,
          bottom: 15,
          containLabel: true,
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: 'value',
            show: false,
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
            type: 'category',
            axisTick: {
              show: false,
            },
            data: ['金融保险', '医疗卫生', '社会公共管理', 'IT 通讯电子', '教育'],
            axisLabel: {},
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30, // 柱子宽度
            label: {
              show: true,
              position: ['20','10'], // 位置
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold', // 加粗
              distance: 5, // 距离
            }, // 柱子上方的数值
            itemStyle: {
              color: '#5B8FF9', // 渐变
            },
            data: [320, 302, 341, 374, 390, 650, 420],
          },
        ],
      };

      this.$refs.project.updataEchart(option)
    },

    behaviorEchart(){
      let option = {
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 20,
        },
        legend: {
          right : 0,
          bottom : 'center',
          orient: 'vertical',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },

            data: [
              { value: 2, name: '定制' },
              { value: 4, name: '查询' },
              { value: 6, name: '自动化' },
            ],
          },
        ],
      };

      this.$refs.behavior.updataEchart(option)
    },

    rankingEchart(){
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = '';
            params.forEach(v => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
               ${v.name}<span >${v.value}</span> 个`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        },
        legend: {
          selectedMode: false,
        },
        grid: {
          top: 25,
          left: 15,
          right: 15,
          bottom: 15,
          containLabel: true,
        },
        xAxis: [
          {
            splitLine: {
              show: false,
            },
            type: 'value',
            show: false,
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              //y轴
              show: false,
            },
            type: 'category',
            axisTick: {
              show: false,
            },
            data: ['金融保险', '医疗卫生', '社会公共管理', 'IT 通讯电子', '教育'],
            axisLabel: {},
          },
        ],
        series: [
          {
            type: 'bar',
            barWidth: 30, // 柱子宽度
            label: {
              show: true,
              position: ['20','10'], // 位置
              color: '#fff',
              fontSize: 14,
              fontWeight: 'bold', // 加粗
              distance: 5, // 距离
            }, // 柱子上方的数值
            itemStyle: {
              color: '#5B8FF9', // 渐变
            },
            data: [ 684, 582, 562, 774, 290, 850, 920],
          },
        ],
      };

      this.$refs.ranking.updataEchart(option)
    },

    incrementEchart(){

      let xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8"];
      let yAxisData1 = [100, 138, 350, 173, 180, 150, 180, 230];

      let option = {
        backgroundColor: '#fff',
        color: '#5B8FF9',

        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            let html = '';
            params.forEach(v => {
              html += `2021-${xAxisData[v.axisValue - 1]} <br>${v.marker} ${v.seriesName} ${v.value}`;
            })
            return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        },
        grid: {
          top: 65,
          left: 5,
          bottom: 10,
          right: 20,
          containLabel: true
        },
        xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: '2021-{value}',
            textStyle: {
              color: "#333"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9"
            }
          },
          data: xAxisData,
        }],
        yAxis: [{
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#666"
            }
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9"
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: "数据占比",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          symbol: 'circle',//数据交叉点样式
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: '#5B8FF9'
                },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ],
                false
              ),
              shadowColor: '#5B8FF9',
              shadowBlur: 10
            }
          },
          data: yAxisData1
        }]
      };

      this.$refs.increment.updataEchart(option)

    },
  }
}
</script>

<style lang="scss" scoped>
.sm-tabs{
  li{
    display: inline-block;
    padding: 12px;
    font-size: 16px;
    color: #1D1F24;
    border:1px solid #CCD2D8;
    margin-right: 16px;
    cursor: pointer;
    &.active{
      border-top:2px solid #1072E0;
    }
  }
}
.tool-wrap{
  padding: 24px;

  .sm-title{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 30px
  }

  .tabs-box{
    ::v-deep .el-tabs__item{
      font-size: 18px;
    }
  }

  .sm-banner{
    position: relative;
    height: 110px;
    line-height: 110px;
    text-indent: 32px;
    margin: 0 0 20px;
    color: #fff;
    background: url('~@/assets/img/admin/sm-bg.png')no-repeat;
    background-size: cover;
    background-position: bottom;
    h1{
      font-size: 24px;
    }
    a{
      position: absolute;
      right: 30px;
      top: 25px;
      display: inline-block;
      text-align: center;
      width: 160px;
      height: 60px;
      line-height: 60px;
      background: #FFFFFF;
      border-radius: 30px;
      font-size: 18px;
      font-weight: 500;
      color: #1072E0;
      text-indent: 0;
    }
  }
}

.info-box{
  padding: 16px 24px;
  border: 1px solid #EBEBEB;
  margin-bottom: 16px;
  h3{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
    margin-bottom: 14px;
  }
  dl{
    width: 80%;
    dd{
      display: inline-block;
      margin-top: 6px;
      width: 33%;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;

      span{
        display: inline-block;
        width: 100px;
        color: #999999;
      }
      strong{
        color: #333333;
      }
    }
  }
}

.row-box{
  display: flex;
  >div{
    flex: 1;
    &:first-child{
      margin-right: 16px;
    }
  }
  .column-2{
    dd{
      width: 49%;
    }
    span{
      width: 140px;
    }
  }
  .column-1{
    dd{
      width: 100%;
    }
    span{
      width: 140px;
    }
  }
}

.evaluate{
  padding: 20px 24px;
  background: rgba(246, 250, 255, 0.98);
  border: 1px solid #EBEBEB;
  h3{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
  }
  p{
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 15px;
    margin: 20px 0;
  }
}

.column-box{
  height: 376px;
  margin-bottom: 16px;
  .view-box{
    padding: 24px;
    border:1px solid #EBEBEB;
    .echart-view{
      position: relative;
      top: 10px;
      height: calc(100% - 15px);
    }
  }
  &.column-box-3{
    display: flex;
    >div{
      flex: 1;
      margin-right: 16px;
      &:last-child{
        margin: 0;
      }
    }
  }
  .title{
    position: relative;
    h2{
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 16px;
    }
    .select-nav{
      position: absolute;
      right: 0px;
      top: 0px;
      display: flex;
      width: 180px;
      z-index: 99;
      border:1px solid rgba(0, 0, 0, 0.15);
      span{
        flex: 1;
        text-align: center;
        line-height: 40px;
        height: 40px;
        color: #000000;
        background: rgba(0, 0, 0, 0.02);
        cursor: pointer;
        &.active{
          color: #fff;
          background: #1072E0;
        }
      }
    }
  }
}
</style>
